<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <div id="app">
        <button-counter></button-counter>
        <!-- 驼峰式要转成短横线标签使用 -->
        <hello-world></hello-world>
        <!-- 局部组件 -->
        <hello-component></hello-component>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        /*
         * 组件化开发思想： 现实中的模块化手机
         *      标准，分治，重用， 组合
         */

        //  全局组件注册
        Vue.component('button-counter', {
            data: function () { // data 必须是一个函数，不能改为对象
                return {
                    count: 0
                }
            },
            // template 中只能有一个根元素
            //字符串模板中可以使用驼峰式标签，但是在普通标签中不行
            template: `<div>
                                <button @click='handle'>点击了{{count}}次~</button>
                                <HelloWorld></HelloWorld>
                            </div>`,
            methods: {
                handle: function () {
                    this.count++
                }
            },
        })
        // 组件命令方式：驼峰式和短横线方式
        Vue.component('HelloWorld', {
            data: function () {
                return {}
            },
            template: `<div>
                                hello world
                            </div>`,
            methods: {
                handle: function () {
                    this.count++
                }
            },
        })
        var HelloComponent = {
            data: function () {
                return {
                    msg: '局部组件'
                }
            },
            template: `<div>
                                {{msg}}
                            </div>`,
        }
        var vm = new Vue({
            el: '#app',
            data: {
                msg: "hello vue"
            },
            // components: { //局部注册组件
            //     HelloComponent
            // }
            components: { //局部注册组件  ： 只能在注册它的父组件中使用
                'hello-component': HelloComponent
            }
        })
    </script>
</body>

</html>